<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org" xmlns:shiro="http://www.pollix.at/thymeleaf/shiro">
<head>
  <th:block th:include="include :: header('财务运单列表')" />
  <th:block th:include="include :: bootstrap-select-css" />
</head>
<body class="gray-bg">
<div class="container-div">
  <div class="row">
    <div class="col-sm-10 search-collapse">
      <form id="formId">
        <div class="select-list">
          <ul>
            <li>
              <label>订单查询：</label>
              <input type="text" id="searchValue" name="searchValue"/>
            </li>
            <li class="select-time">
              <label>操作时间：</label>
              <input type="text" class="time-input" id="startTime" placeholder="开始时间" name="params[beginTime]"/>
              <span>-</span>
              <input type="text" class="time-input" id="endTime" placeholder="结束时间" name="params[endTime]"/>
            </li>
            <li>
              <a class="btn btn-primary btn-rounded btn-sm" onclick="$.table.search()"><i class="fa fa-search"></i>&nbsp;搜索</a>
              <a class="btn btn-warning btn-rounded btn-sm" onclick="$.form.reset()"><i class="fa fa-refresh"></i>&nbsp;重置</a>
            </li>
          </ul>
        </div>
      </form>
    </div>
    <div class="btn-group-sm" id="toolbar" role="group">
      <a class="btn btn-warning" onclick="$.table.exportExcel()" shiro:hasPermission="system:finance:export">
        <i class="fa fa-download"></i> 导出数据
      </a>
    </div>
    <div class="col-sm-12 select-table table-striped" style=" white-space: nowrap; overflow: hidden; overflow-x: scroll; -webkit-backface-visibility: hidden; -webkit-overflow-scrolling: touch;">
      <table id="bootstrap-table">
      </table>
    </div>
  </div>
</div>
<th:block th:include="include :: footer" />
<th:block th:include="include :: bootstrap-select-js" />
<script th:inline="javascript">


  var editFlag = [[${@permission.hasPermi('system:finance:edit')}]];
  var datasPay = [[${@dict.getType('pay_type')}]];
  var datasType = [[${@dict.getType('order_type')}]];

  var prefix = ctx + "system/finance";

  var sumIncomeAmount = "0";
  var sumExpenditureAmount = "0";

  $(function() {
    var options = {
      url: prefix + "/list",
      refundUrl: prefix + "/refund",
      completionUrl: prefix + "/completion",
      updateUrl: prefix + "/edit/{id}",
      exportUrl: prefix + "/export",
      detailUrl: prefix + "/detail/{id}",
      settlementUrl: prefix + "/settlement",
      detailedUrl : prefix + "/detailed/{id}",
      salesmanUrl: prefix + "/salesman/{id}",
      modalName: "收支报表",
      showFooter: true,
      showSearch: false,
      showRefresh: false,
      showToggle: false,
      showColumns: false,
      columns: [
          { field: 'createUser', title: '建单人', align:"center", },
          { field: 'vehicleInspector', title: '提验人',  align:"center", },
          { field: 'userName',  title: '业务员',  align:"center", },
          { field: 'client', title: '委托人', align:"center", },
          { field: 'clientPhone', title: '委托人电话', align:"center", },
          { field: 'vehicleModel', title: '车型', align:"center",  },
          { field: 'vin', title: '车架号', align:"center", },
          { field: 'origin', title: '起始地', align:"center",
            formatter: function(value, row, index) {
              return $.table.tooltip(value, 10);
            }
          },
          { field: 'dest', title: '目的地', align:"center",
            formatter: function(value, row, index) {
              return $.table.tooltip(value, 10);
            }
          },
          { field: 'receiverPhone', align: 'center', title: '接车人电话', },
          { field: 'freightAmount', align: 'center', title: '运费金额',  },
          { field: 'paidAmount', align: 'center', title: '预付款', },
          { field: 'payType', title: '支付方式', align: 'center',
            formatter: function(value, row, index) {
              return $.table.selectDictLabel(datasPay, value);
            }
          },
          { field: 'orderType', title: '订单状态', align: 'center',valign:"middle",
            formatter: function(value, row, index) {
              return $.table.selectDictLabel(datasType, value);
            }
          },
          { field: 'createOrderTime', align: 'center', title: '建单日期',
            formatter: function(value, row, index) {
              return $.table.tooltip(value, 13);
            }
          },
          { field: 'incomeDetails', title: "收入明细", valign: "middle", align:"center", },
          { field: 'expenditureDetails', title: "支出明细", valign: "middle", align:"center", },
          { title: '收入', align:"center",
              formatter: function(value,row,index) {
                sumIncomeAmount = row.sumIncomeAmount;
                if (row.incomeAmount != null) {
                      return '<span style="color:#1C83C5FF">'+row.incomeAmount+'</span>';
                  }
              },
              footerFormatter:function (row) {
                  // var sumBalance = 0;
                  // for (var i in value) {
                  //     if(value[i].incomeAmount != null){
                  //         sumBalance += parseFloat(value[i].incomeAmount);
                  //     }
                  // }
                  return '总计:<span style="color:#1C83C5FF">'+sumIncomeAmount+'</span>';
              }
          },
          { title: '支出', align:"center",
              formatter: function(value,row,index) {
                sumExpenditureAmount = row.sumExpenditureAmount;
                if (row.expenditureAmount != null) {
                      return '<span style="color:#FF0000">'+row.expenditureAmount+'</span>';
                  }
              },
              footerFormatter:function (row) {
                  // var sumBalance = 0;
                  // for (var i in value) {
                  //     if(value[i].expenditureAmount != null){
                  //         sumBalance += parseFloat(value[i].expenditureAmount);
                  //     }
                  // }
                  return '总计:<span style="color:#FF0000">'+sumExpenditureAmount+'</span>';
              }
          },
          { field: 'createTime', title: '操作日期', align:"center", },
      ]
    };
    $.table.init(options);
  });
</script>
</body>
</html>